<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>管理员操作页面 - 【少儿编程教学平台】</title>
    <link rel="icon" href="/img/logo.png">
    <link rel="stylesheet" type="text/css" href="/css/Operation.css">
    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>

</head>
<body>

<div class="headerpage"></div>

<div class="outermost">
    <div class="middle">
        <br><br>
        <h1>查询界面</h1><br><br>
        请输入关键字：<input type="text" class="keyword">
        <button class="search">搜索学生</button>
        <button class="tSearch">搜索老师</button>
        <br><br><br>

        <table class="content">
            <tr>
                <td>选择</td>
                <td>ID号</td>
                <td>姓名</td>
                <td>密码</td>
                <td>性别</td>
                <td>电话</td>
                <td>地址</td>
                <td>头像</td>
                <td>状态</td>
                <td>操作</td>
            </tr>

        </table>

        <table style="visibility:hidden;" class="content">
            <tr>
                <td>ID号:<input type="text" name="sid" readonly></td>
            </tr>
            <tr>
                <td>姓名:<input type="text" name="sname"></td>
            </tr>
            <tr>
                <td>密码:<input type="text" name="spassword"></td>
            </tr>
            <tr>
                <td>性别:<input type="text" name="sgender"></td>
            </tr>
            <tr>
                <td>电话:<input type="text" name="sphone"></td>
            </tr>
            <tr>
                <td>地址:<input type="text" name="saddress"></td>
            </tr>
            <tr>
                <td>头像:<input type="text" name="simg"></td>
            </tr>
        </table>
        <button type="button" class="change" style="visibility:hidden;">修改</button>

    </div>
</div>
<div class="footerpage"></div>
<script>

    $(function () {

        $(".headerpage").load("header.jsp");
        $(".footerpage").load("footer.jsp");

        var table = document.getElementsByTagName("table")[0];
        var init = table.innerHTML;
        var arr = [];


        $('button.search').click(function a() {
            $.ajax({
                type: 'post',
                url: 'sSearch.action',
                data: {
                    "keyword": $("input.keyword")[0].value
                },

                contentType: "application/x-www-form-urlencoded",

                dataType: 'json',

                success: function (data) {
                    console.log(init);
                    table.innerHTML = init;
                    console.log("请求成功");
                    console.log(data);


                    for (var index = 0; index < data.length; index++) {
                        var obj = data[index];
                        table.innerHTML += "<tr><td><input type='checkbox' name='deleteNums' value=" + obj.sid + "</td><td>" + obj.sid + "</td><td>" +
                            obj.sname + "</td><td>" + obj.spassword + "</td><td>" + obj.sgender + "</td><td>" +
                            obj.sphone + "</td><td>" + obj.saddress + "</td><td>" + obj.simg + "</td><td>" +
                            obj.status + "</td><td><span class=\"change\" value=" + obj.sid + " style =\"text-decoration:underline\" >修改</span></td></tr>"
                    }
                    table.innerHTML += "<tr><td><button type='button' class='batchDelete'>批量删除</button></td></tr>";

                    $("span.change").css("cursor", "pointer").hover(function () {
                        $(this).css("color", "red"
                        )
                    }, function () {
                        $(this).css("color", "green"
                        )
                    }),

                        $("span.change").click(function () {
                            $("table").eq(1).css("visibility", "visible");
                            $("button.change").css("visibility", "visible");
                        })


                    $('button.batchDelete').click(function () {

                        var inputs = document.getElementsByTagName("input");
                        for (var index = 1; index < inputs.length; index++) {
                            if (inputs[index].checked) {
                                arr.push(inputs[index].value);
                            }
                        }
                        console.log(arr);
                        $.ajax({
                            type: 'post',

                            traditional: true,

                            url: 'sBatchDelete.action',
                            data: {
                                "arr": arr
                            },

                            contentType: "application/x-www-form-urlencoded",

                            dataType: 'json',

                            success: function (data) {

                                alert("删除成功");
                            },

                            error: function (data) {
                                console.log("请求失败");
                            }


                        })
                    })


                    $("button.change").click(function () {
                        $.ajax({
                            type: 'post',
                            url: 'sUpdate.action',
                            data: {
                                "sid": $("[name='sid']")[0].value,
                                "sname": $("[name='sname']")[0].value,
                                "spassword": $("[name='spassword']")[0].value,
                                "sgender": $("[name='sgender']")[0].value,
                                "sphone": $("[name='sphone']")[0].value,
                                "saddress": $("[name='saddress']")[0].value,
                                "simg": $("[name='simg']")[0].value
                            },

                            contentType: "application/x-www-form-urlencoded",

                            dataType: 'json',

                            success: function (data) {
                                alert("修改成功");
                            },

                            error: function (data) {
                                console.log("请求失败");
                            }


                        })
                    })


                },

                error: function (data) {
                    console.log("请求失败");
                }


            })
        })


        $('button.tSearch').click(function a() {
            $.ajax({
                type: 'post',
                url: 'tSearch.action',
                data: {
                    "keyword": $("input.keyword")[0].value
                },

                contentType: "application/x-www-form-urlencoded",

                dataType: 'json',

                success: function (data) {
                    console.log(init);
                    table.innerHTML = init;
                    console.log("请求成功");
                    console.log(data);


                    for (var index = 0; index < data.length; index++) {
                        var obj = data[index];
                        table.innerHTML += "<tr><td><input type='checkbox' name='deleteNums' value=" + obj.tid + "></td><td>" + obj.tid + "</td><td>" +
                            obj.tname + "</td><td>" + obj.tpassword + "</td><td>" + obj.tgender + "</td><td>" +
                            obj.tphone + "</td><td>" + obj.taddress + "</td><td>" + obj.timg + "</td><td>" +
                            obj.status + "</td><td><span class=\"change\" value=" + obj.tid + " style =\"text-decoration:underline\" >修改</span></td></tr>"
                    }
                    table.innerHTML += "<tr><td><button type='button' class='batchDelete'>批量删除</button></td></tr>";

                    $("span.change").css("cursor", "pointer").hover(function () {
                        $(this).css("color", "red"
                        )
                    }, function () {
                        $(this).css("color", "green"
                        )
                    }),

                        $("span.change").click(function () {
                            $("table").eq(1).css("visibility", "visible");
                            $("button.change").css("visibility", "visible");
                        })


                    $('button.batchDelete').click(function () {

                        var inputs = document.getElementsByTagName("input");
                        for (var index = 1; index < inputs.length; index++) {
                            if (inputs[index].checked) {
                                arr.push(inputs[index].value);
                            }
                        }
                        console.log(arr);
                        $.ajax({
                            type: 'post',

                            traditional: true,

                            url: 'tBatchDelete.action',
                            data: {
                                "arr": arr
                            },

                            contentType: "application/x-www-form-urlencoded",

                            dataType: 'json',

                            success: function (data) {

                                alert("删除成功");
                            },

                            error: function (data) {
                                console.log("请求失败");
                            }


                        })
                    })


                    $("button.change").click(function () {
                        $.ajax({
                            type: 'post',
                            url: 'tUpdate.action',
                            data: {
                                "tid": $("[name='tid']")[0].value,
                                "tname": $("[name='tname']")[0].value,
                                "tpassword": $("[name='tpassword']")[0].value,
                                "tgender": $("[name='tgender']")[0].value,
                                "tphone": $("[name='tphone']")[0].value,
                                "taddress": $("[name='taddress']")[0].value,
                                "timg": $("[name='timg']")[0].value
                            },

                            contentType: "application/x-www-form-urlencoded",

                            dataType: 'json',

                            success: function (data) {
                                alert("修改成功");
                            },

                            error: function (data) {
                                console.log("请求失败");
                            }


                        })
                    })


                },

                error: function (data) {
                    console.log("请求失败");
                }


            })
        })


    })
</script>


</body>
</html>